<template>
  <view class="records-card">
    <view class="records-item">
        <view
          class="content-left"
          :class="type == '电费' ? 'electric' : 'water'"
        >
        </view>
        <view class="content-right">
          <view class="content-title">
            <view class="type">
              {{ type }}
            </view>
            |<view class="identifier"> {{ identifier }} </view>
          </view>
          <view class="content-balance"> 费用 ¥ {{ balance }} 元 </view>
          <view class="content-tag">
          计费时间：{{ time }}
          </view>
        </view>
      </view>
  </view>
</template>

<script setup>
import { ref, defineProps } from "vue";
const list = [
  {
    identifier: "ceshi",
    balance: "ceshi",
    date: "ceshi",
  },
];
const props = defineProps({
  type: {
    type: String,
  },
  identifier: {
    type: String,
  },
  balance: {
    type: [String,Number],
  },
  time: {
    type: String,
  },
  // type: {
  //   type: String,
  // },
});
</script>

<style lang="less" scoped>
@import url(./style/index.less);
</style>